<template>
  <div class="table">
    <div class="form">
      <form-create v-model="formData" v-bind="fcOptions" />
    </div>
    <div class="wrapp">
      <div class="toolbar">
        <slot name="toolbar" />
      </div>
      <div class="content">
        <vxe-grid v-bind="gridOptions" @page-change="handlePageChange">
          <template #action>
            <slot name="action" />
          </template>
        </vxe-grid>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ListTable">
import { ref } from 'vue';

const emits = defineEmits(['register']);
const gridOptions = ref();
const fcOptions = ref();
const formData = ref();
const syncFcOptions = (value) => {
  fcOptions.value = value;
};

const syncGridOptions = (value) => {
  gridOptions.value = value;
};

// const syncListHandler = ()=>syncList({...formData.value, pager: gridOptions.value.pagerConfig})

let syncTableDataHandler: any;
const syncTableData = async (handler = syncTableDataHandler) => {
  syncTableDataHandler = handler;
  // 删除会造成闪烁
  // delete gridOptions.value.pagerConfig.total;
  // delete gridOptions.value.pagerConfig.enabled;
  // console.log(999, handler,  gridOptions.value.pagerConfig);

  const data = await handler({ pager: gridOptions.value.pagerConfig });
  gridOptions.value.data = data.list;
  gridOptions.value.pagerConfig.total = data.pager.total;
};

const handlePageChange = (params) => {
  gridOptions.value.pagerConfig.currentPage = params.currentPage;
  gridOptions.value.pagerConfig.pageSize = params.pageSize;
  // 重新发起请求
  syncTableData();
};

emits('register', {
  syncGridOptions,
  syncTableData,
  syncFcOptions,
});
</script>
<style lang="less" scoped>
@paddingX: 20px;

.table {
  .form {
    background-color: white;
    padding: 40px @paddingX;
  }

  .wrapp {
    background-color: white;
    padding: 10px @paddingX;

    margin-top: 20px;

    .toolbar {
      display: flex;
      justify-content: end;
    }

    .content {
      margin-top: 10px;
    }
  }
}
</style>
